<template>
  <div>
    <div>
      <el-input v-model="orderId" placeholder="客户订单号" style="width:280px"></el-input>
      <el-input v-model="orderName" placeholder="客户名称" style="width:280px"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="findReceipt()">查询</el-button>
      <el-button type="info" icon="el-icon-refresh" @click="cleanSelect">重置</el-button>
    </div>
    <br>


    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
       >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="order.orderId"
          label="订单单号"
          width="80"
          align="center">
        </el-table-column>
        <el-table-column
          prop="order.typeName"
          label="订单类型"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="order.tranType"
          label="运输类型"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="order.username"
          label="客户名称"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="order.orderTime"
          label="下单时间"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="order.beginCity"
          label="出发城市"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="order.endCity"
          label="目的城市"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="receiptStatus"
          label="回单状态"
          width="80">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.receiptStatus === 1 ? 'success':'danger'"
              disable-transitions>
              <span v-if="scope.row.receiptStatus==1">已回单</span>
              <span v-else>未回单</span>
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-s-tools"
              size="mini"
              @click="dialogVisible1 = true,
              handleEdit(scope.$index, scope.row)">回单管理
            </el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-info"
              @click="dialogVisible = true, handleMore(scope.$index, scope.row)"  >回单详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2,4,6]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--编辑回单-->
    <el-dialog
      title="修改回单"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose1">

      <el-form ref="receipt" :model="receipt" label-width="80px">
        <el-form-item label="订单编号">
          <el-input v-model="receipt.orderId" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="回单编号">
          <el-input v-model="receipt.receiptNum" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="回单时间">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="receipt.receiptDate" type="datetime"></el-date-picker>
        </el-form-item>
        <el-form-item label="回单状态" >
          <el-select v-model="receipt.receiptStatus"   placeholder="请选择" style="width: 220px" >
            <el-option
              v-for="status in status1"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回单说明">
          <el-input v-model="receipt.receiptRemark"
                    type="textarea"
                    :rows="5"
                    placeholder="请输入内容"></el-input>
        </el-form-item>

      </el-form>
      <el-button @click="dialogVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible1 = false,onSubmit1()">确定提交</el-button>

    </el-dialog>
<!--    查看详细资料框-->
    <el-dialog
      title="查看订单信息"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
       >
      <template>
        <el-table
          :data="moreDatas"
          style="width: 100%">
          <el-table-column
            prop="orderId"
            label="订单编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="typeName"
            label="订单类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="tranType"
            label="运输类型"
            width="80">
          </el-table-column>
          <el-table-column
            prop="username"
            label="客户名称"
            width="80">
          </el-table-column>
          <el-table-column
            prop="orderTime"
            label="下单时间"
            width="100">
          </el-table-column>
          <el-table-column
            prop="logistics.route"
            label="路线"
            width="180">
          </el-table-column>
          <el-table-column
            prop="goods.goodsName"
            label="货物类型"
            width="80">
          </el-table-column>
          <el-table-column
            prop="goods.number"
            label="总数量"
            width="80">
          </el-table-column>
          <el-table-column
            prop="goods.totalWeight"
            label="总重量"
            width="80">
          </el-table-column>
          <el-table-column
            prop="goods.totalBulk"
            label="总体积"
            width="80">
          </el-table-column>
        </el-table>
      </template>
      <br>
      <template>
        <el-table
          :data="moreDatas"
          style="width: 100%">
          <el-table-column
            prop="logistics.vehicleId"
            label="派车订单"
            width="180">
          </el-table-column>
          <el-table-column
            prop="logistics.route"
            label="路线"
            width="180">
          </el-table-column>
          <el-table-column
            prop="logistics.carrierName"
            label="承运商"
            width="180">
          </el-table-column>
          <el-table-column
            prop="logistics.carPlate"
            label="车辆牌照"
            width="180">
          </el-table-column>
          <el-table-column
            prop="logistics.driverName"
            label="司机"
            width="180">
          </el-table-column>
        </el-table>
      </template>
      <br>
      <br>
      <br>

      <el-button @click="dialogVisible = false" icon="el-icon-remove-outline" type="info">关 闭</el-button>

    </el-dialog>
  </div>
</template>

<script>
export default {

  name: "receipt",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSizes: [2, 4, 6],
      pageSize: 2,
      total: 0,
      formInline: {
        typeName: ''

      },

      dialogVisible: false,
      dialogVisible1: false,
      receipt: {
        receiptId:'',
        receiptNum: '',
        orderId: '',
        receiptDate: '',
        receiptRemark: '',
        receiptStatus: '',
      },
      //状态栏
      status1: [{
        value: 1,
        label: '已回单'
      }, {
        value: 0,
        label: '未回单'
      }],
      order: [],
      orderId: '',
      orderName: '',
      moreDatas: []
    }

  },
  methods: {
    //


   //修改框提交
    onSubmit1() {

      this.$http({
        method: "PUT",
        url: "http://localhost:8090/receipt",
        data: this.receipt
      }).then(resp => {
        this.receipt = {
          receiptNum: '',
          orderId: '',
          receiptDate: '',
          receiptRemark: '',
          receiptStatus: '',
        };
        this.findReceipt(this.currentPage, this.pageSize);
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },

    findById(id) {
      this.$http({
        type: "GET",
        url: `http://localhost:8090/receipt/${id}`
      }).then(resp => {
        console.log(resp);
        console.log(resp.data);
        this.receipt = resp.data.data
      })
    },
    //编辑的方法
    handleEdit(index, row) {
      let id = row.receiptId;
      this.findById(id);
    },
    handleMore(index,row){
      let id = row.orderId;
      this.moreData(id);
    },
    moreData(id){
      this.$http({
        type:"GET",
        url:`http://localhost:8090/receipt/more/${id}`
      }).then(resp=>{
        console.log(resp.data);
        this.moreDatas = resp.data.data
      })
    },

    // 页面大小的触发函数
    handleSizeChange(val) {

      //拿到当前的页面大小
      this.pageSize = val;
      //重新加载 数据
      this.findReceipt(this.currentPage, this.pageSize);
    },
    //当前页面变化触发的函数
    handleCurrentChange(val) {

      this.currentPage = val;
      // 当前第几页发生了变化  重新加载数据
      this.findReceipt(this.currentPage, this.pageSize);
    },
    findReceipt(currentPage, pageSize) {
      if (this.orderName || this.orderId) {
        this.currentPage = 1;
      }
      this.$http({
        method: "GET",
        url: "http://localhost:8090/receipt",
        params: {
          orderName: this.orderName,
          orderId: this.orderId,
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(resp => {
        console.log(resp)
        this.tableData = resp.data.data.records;
        this.total = resp.data.data.total;
      })
    },
    cleanSelect() {
      this.orderId = '';
      this.orderName = '';
      this.findReceipt(1, 2);
    }
  },
  created() {
    this.findReceipt(1, 2);
  }
}

</script>

<style>
</style>
